4 min read 次阅读

为什么js推荐使用单引号

单引号和多引号区别，没啥区别，单引号编译速度更快，而且单引号内可以使用双引号，有时候内部是json 格式必须用双引号
中文解释

模块

创建模块post 放在 modules/post 下 ng generate module modules/post
componet 是生成的html 和css,ts 文件

模块导入

需要导出的模块在module 的 exports中添加，exports: [PostComponent],
引用的模块导入：imports: [PostModule],

数据绑定

在component.ts 内声明
.html 使用{{值}}

*ngFor

*ngfor 会自动扩展成 <ng-template ngfor> *是一种语法糖，缩写形式

  <li *ngFor="let entity of entities">
    <h4>{{ entity.title }}</h4>
  </li>

*ngIf

<p *ngIf="entity.body">{{ entity.body }}</p>

属性绑定

<a title="{{ entity.title }}" >{{ entity.title }}</a>

<a [title]="entity.title">{{ entity.title }}</a>

第二种形式可以绑定标签不存在的属性值 如 text-content, Angular 官方文档在绑定属性几乎都是使用[]，而插值表达式{{}}更多是用于显示，两者最大的区别就是后者会将{{}}语句里执行完的值再转换string 类型。

事件绑定

  <button (click)="removeItem(i)">Remove</button>

参数直接填就行

双向绑定

Module
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

app.module.ts (@NgModule imports)
content_copy
imports: [
BrowserModule,
FormsModule
],

<input [(ngModel)]="hero.name" placeholder="name"/>

[(ngModel)] 是 Angular 的双向数据绑定语法。

这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上，以便数据流可以双向流动：从 hero.name 属性流动到 textbox，并且从 textbox 流回到 hero.name 。

父子组件

父传子

传递数据， 父组件ul, 数据为entities在父组件内， 必须在子部件属性内赋值， 子部件使用@Input,， //@Input 此命令用来修饰属性是用来接收父组件传递的值 参考
有兴趣了解下单向数据流 angular 更新view，是在model更新阶段进行，不是model生成view阶段。

  <ul>
   <app-post-item *ngFor = "let entity of entities"     [entity] = entity>
   </app-post-item>
  </ul>

子传父（function）

This example features an <input> where a user can enter a value and click a <button> that raises an event. The EventEmitter then relays the data to the parent component.

子部件

  @Output() newItemEvent = new EventEmitter<string>();

 addNewItem(value: string) {
   this.newItemEvent.emit(value);
 }

  <button (click)="addNewItem(newItem.value)">Add to parent's list</button>

父部件

 <app-item-output (newItemEvent)="addItem($event)"></app-item-output>

The event binding, (newItemEvent)='addItem($event)', tells Angular to connect the event in the child, newItemEvent, to the method in the parent, addItem(),

路由

basics

app-routing.module.ts

 const routes: Routes = [{ path: 'posts', component: PostComponent }];

   <a
     [routerLink]="['/posts', entity.id]"
     [title]="entity.title"
     [textContent]="entity.title"
   ></a>

import from app-routing module

paramMap

  constructor(private route: ActivatedRoute) {}

 ngOnInit(): void {
   this.route.paramMap.subscribe((params) => {
     const postId = +params.get('id');
     console.log(postId);
   });

Model 标记可选属性使用问号 body?

服务

 @Injectable({
 providedIn: 'root'
})
root表示在任何位置可以使用

注入

componet.ts

   constructor(private postService: PostService) {
   this.entities = posts;
 }

表单

看这个文章，更详细点

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

演示：

这是一个pre标签 哈
哈

formBuilder

 registerForm = this.formBuilder.group({
   username: ['', Validators.required],
   password: ['', [Validators.required, Validators.minLength(6)]],
 });

I am a real pikachu!